<template>
  <!-- 最外层只能有一个组件，不能出现多个 -->
  <div class="demo-userComp-ztree-ztreeMenuDemo">
      <!--框架导航栏-->
      <ztree-menu @link="openTab" :navData="navData"></ztree-menu>


      <!-- 显示HTML代码 -->
      <pre>
            <code class="html" v-text="htmlCode">
            </code>
        </pre>
      <!-- 显示JavaScript代码 -->
      <pre>
            <code class="javascript"  v-text="jsCode">

            </code>
        </pre>

      <!-- 文档说明 -->
      <div class="demo-extendPrototype-stringExtend">
          <div class="api">
              <div class="anchor">
                  <h2 id="API">Array Object API</h2>
              </div>
              <div class="anchor">
                  <h3 id="Select_props">extend methods</h3>
              </div>
              <table>
                  <thead>
                  <tr>
                      <th>方法名</th>
                      <th>说明</th>
                      <th>参数</th>
                      <th>返回值</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                      <td>isURL</td>
                      <td>检查是否是URL地址</td>
                      <td>无</td>
                      <td>
                          Boolean，如果是地址返回true,如果不是地址，返回false
                      </td>
                  </tr>


                  </tbody>
              </table>

          </div>
      </div>

  </div>
</template>

<script>
    import hljs from 'highlight.js'
    var navData = [
        [

            {
                "id": 17028,
                "pid": 0,
                "name": "物流管理",
                "iconName":"icon-quality"
            },
            {
                "id": 17029,
                "pid": 17028,
                "name": "门禁管理",
                "path": "/accessControl",
                "url": "/accessControl"
            },
            {
                "id": 17030,
                "pid": 17028,
                "name": "采购订单",
                "path": "/purchaseOrder",
                "url": "/purchaseOrder"
            },
            {
                "id": 17031,
                "pid": 17028,
                "name": "到货预报",
                "path": "/arriForecast",
                "url": "/arriForecast"
            },
            {
                "id": 17032,
                "pid": 17028,
                "name": "车辆预约",
                "path": "/vehicleOrder",
                "url": "/vehicleOrder"
            },
            {
                "id": 17033,
                "pid": 17028,
                "name": "车辆预约审批",
                "path": "/vehicleApprove",
                "url": "/vehicleApprove"
            },
            {
                "id": 17034,
                "pid": 17028,
                "name": "销售订单",
                "path": "/saleOrder",
                "url": "/saleOrder"
            }, {
            "id": 17035,
            "pid": 17028,
            "name": "发货预报",
            "path": "/shpmForecast",
            "url": "/shpmForecast"
        }, {
            "id": 17036,
            "pid": 17028,
            "name": "调度任务管理",
            "path": "/dispatcherTask",
            "url": "/dispatcherTask"
        }, {
            "id": 17037,
            "pid": 17028,
            "name": "调拨计划管理",
            "path": "/allocationPlan",
            "url": "/allocationPlan"
        },

            {
                "id": 23,
                "pid": 0,
                "name": "检化验管理"
            },
            {
                "id": 24,
                "pid": 23,
                "name": "标准号管理",
                "path": "/inspection/standardNumber",
                "url": "/inspection/standardNumber"
            },
            {
                "id": 25,
                "pid": 23,
                "name": "检化验项目管理",
                "path": "/inspection/inspectionProjectManagement",
                "url": "/inspection/inspectionProjectManagement"
            },
            {
                "id": 100,
                "pid": 23,
                "name": "检化验标准管理",
                "path": "/inspection/inspectionProjectStandard",
                "url": "/inspection/inspectionProjectStandard"
            },
            {
                "id": 101,
                "pid": 23,
                "name": "牌号管理",
                "path": "/inspection/grade",
                "url": "/inspection/grade"
            },

            {
                "id": 33,
                "pid": 0,
                "name": "质量管理QMS"
            },
            {
                "id": 34,
                "pid": 33,
                "name": "检化验结果管理",
                "path": "/inspectionTest/ResultManagement",
                "url": "/inspectionTest/ResultManagement"
            },
            {
                "id": 35,
                "pid": 33,
                "name": "检化验订单受理",
                "path": "/inspectionTest/inspectionOrderAcceptance",
                "url": "/inspectionTest/inspectionOrderAcceptance"
            },
            {
                "id": 36,
                "pid": 33,
                "name": "检化验任务管理",
                "path": "/inspectionTest/testTaskManagement",
                "url": "/inspectionTest/testTaskManagement"
            },
            {
                "id": 17,
                "pid": 0,
                "name": "基础信息"
            },

            {
                "id": 18,
                "pid": 17,
                "name": "司机管理",
                "path": "/metering/driverManagement",
                "url": "/metering/driverManagement"
            },
            {
                "id": 19,
                "pid": 17,
                "name": "供应商管理",
                "path": "/metering/supplierManagement",
                "url": "/metering/supplierManagement"
            },
            {
                "id": 20,
                "pid": 17,
                "name": "客户管理",
                "path": "/metering/customerManagement",
                "url": "/metering/customerManagement"
            },
            {
                "id": 305,
                "pid": 17,
                "name": "承运商管理",
            },
            {
                "id": 306,
                "pid": 305,
                "name": "承运商基本信息",
                "path": "/metering/carrier",
                "url": "/metering/carrier"
            },
            {
                "id": 307,
                "pid": 305,
                "name": "承运商审核",
                "path": "/metering/carrierAudit",
                "url": "/metering/carrierAudit"
            },
            {
                "id": 21,
                "pid": 17,
                "name": "维修厂管理",
                "path": "/metering/maintainShopManagement",
                "url": "/metering/maintainShopManagement"
            },
            {
                "id": 26,
                "pid": 17,
                "name": "计量点管理",
                "path": "/metering/measuringPoint",
                "url": "/metering/measuringPoint"
            },
            {
                "id": 27,
                "pid": 17,
                "name": "语音信息管理",
                "path": "/metering/voiceMessage",
                "url": "/metering/voiceMessage"
            },
            {
                "id": 280,
                "pid": 17,
                "name": "设备管理",
                "path": "/metering/deviceManage",
                "url": "/metering/deviceManage"
            },
            {
                "id": 288,
                "pid": 17,
                "name": "坐席信息管理",
                "path": "/metering/banquetManage",
                "url": "/metering/banquetManage"
            },
            {
                "id": 281,
                "pid": 312,
                "name": "计量历史数据管理",
                "path": "/metering/measuringHistoryData",
                "url": "/metering/measuringHistoryData"
            },
            {
                "id": 282,
                "pid": 312,
                "name": "洁净数据管理",
                "path": "/metering/cleanDataManage",
                "url": "/metering/cleanDataManage"
            },
            {
                "id": 283,
                "pid": 312,
                "name": "一次计量数据管理",
                "path": "/metering/primaryDataManage",
                "url": "/metering/primaryDataManage"
            },
            {
                "id": 302,
                "pid": 0,
                "name": "车辆管理",
            },
            {
                "id": 303,
                "pid": 302,
                "name": "车辆基本信息",
                "path": "/metering/vehicle",
                "url": "/metering/vehicle"
            },
            {
                "id": 304,
                "pid": 302,
                "name": "车辆审核",
                "path": "/metering/vehicleApproval",
                "url": "/metering/vehicleApproval"
            },
            {
                "id": 301,
                "pid": 302,
                "name": "维保项目管理",
                "path": "/metering/mtcschemeItemManagement",
                "url": "/metering/mtcschemeItemManagement"
            },
            {
                "id": 22,
                "pid": 302,
                "name": "车辆维保方案管理",
                "path": "/metering/vehicleRepairManagement",
                "url": "/metering/vehicleRepairManagement"
            },
            {
                "id": 300,
                "pid": 302,
                "name": "维修保养记录",
            },
            {
                "id": 400,
                "pid": 300,
                "name": "维修保养记录基本信息",
                "path": "/metering/vehicleRepairRecordsBaseInfo",
                "url": "/metering/vehicleRepairRecordsBaseInfo"
            },
            {
                "id": 401,
                "pid": 300,
                "name": "维修保养记录审批",
                "path": "/metering/vehicleRepairApproval",
                "url": "/metering/vehicleRepairApproval"
            },
            {
                "id": 308,
                "pid": 17,
                "name": "路线管理",
                "path": "/metering/road",
                "url": "/metering/road"
            },
            {
                "id": 309,
                "pid": 17,
                "name": "区域管理",
                "path": "/metering/zone",
                "url": "/metering/zone"
            },
            {
                "id": 310,
                "pid": 17,
                "name": "物料管理",
                "path": "/metering/goods",
                "url": "/metering/goods"
            },
            {
                "id": 311,
                "pid": 17,
                "name": "门禁管理",
                "path": "/metering/doorControlManagement",
                "url": "/metering/doorControlManagement"
            },
            {
                "id": 312,
                "pid": 0,
                "name": "计量管理",
            },
            {
                "id": 313,
                "pid": 312,
                "name": "计量委托申请",
                "path": "/metering/applicationForEntrustment",
                "url": "/metering/applicationForEntrustment"
            },
            {
                "id": 314,
                "pid": 312,
                "name": "汽车衡计量",
                "path": "/metering/truckScaleMeasurement",
                "url": "/metering/truckScaleMeasurement"
            },
            {
                "id": 315,
                "pid": 312,
                "name": "计量任务队列",
                "path": "/metering/pointTaskManagement",
                "url": "/metering/pointTaskManagement"
            },
            {
                "id": 316,
                "pid": 312,
                "name": "期限皮重",
                "path": "/metering/termTare",
                "url": "/metering/termTare"
            },

            {
                "id": 2,
                "pid": 0,
                "name": "仓储管理"
            },
            {
                "id": 201,
                "pid": 2,
                "name": "仓储基础信息管理",
                "path": "/warehousing/warehousingIndex",
                "url": "/warehousing/warehousingIndex"
            },
            {
                "id": 202,
                "pid": 2,
                "name": "入库管理"
            },
            {
                "id": 203,
                "pid": 2,
                "name": "出库管理"
            },
            {
                "id": 205,
                "pid": 2,
                "name": "库存管理"
            },
            {
                "id": 2051,
                "pid": 205,
                "name": "库存查询",
                "path": "/warehousing/stock",
                "url": "/warehousing/stock"
            },
            {
                "id": 2052,
                "pid": 205,
                "name": "库存日志查询",
                "path": "/warehousing/stockLog",
                "url": "/warehousing/stockLog"
            },
            {
                "id": 2021,
                "pid": 202,
                "name": "到货通知单管理",
                "path": "/warehousing/goodsArriveOrder",
                "url": "/warehousing/goodsArriveOrder"
            },
            {
                "id": 2022,
                "pid": 202,
                "name": "收货单管理",
                "path": "/warehousing/goodsReceivingOrder",
                "url": "/warehousing/goodsReceivingOrder"
            },
            {
                "id": 2023,
                "pid": 202,
                "name": "入库单管理",
                "path": "/warehousing/goodsAcceptOrder",
                "url": "/warehousing/goodsAcceptOrder"
            },
            {
                "id": 2024,
                "pid": 202,
                "name": "质检信息查询",
                "path": "/warehousing/inspectQuality",
                "url": "/warehousing/inspectQuality"
            },
            {
                "id": 2025,
                "pid": 202,
                "name": "检斤信息查询",
                "path": "/warehousing/goodsWeight",
                "url": "/warehousing/goodsWeight"
            }, // 盘点作业管理

            {
                "id": 206,
                "pid": 2,
                "name": "盘点作业管理",
            },
            {
                "id": 2061,
                "pid": 206,
                "name": "盘点方案管理",
                "path": "/warehousing/inventoryProjectManagement",
                "url": "/warehousing/inventoryProjectManagement"
            },
            {
                "id": 2062,
                "pid": 206,
                "name": "盘盈盘亏报告",
                "path": "/warehousing/inventoryReport",
                "url": "/warehousing/inventoryReport"
            },
            {
                "id": 2031,
                "pid": 203,
                "name": "发货通知单管理",
                "path": "/warehousing/dgNotice",
                "url": "/warehousing/dgNotice"
            },
            {
                "id": 2032,
                "pid": 203,
                "name": "拣货单管理",
                "path": "/warehousing/pickNoteOrder",
                "url": "/warehousing/pickNoteOrder"
            },
            {
                "id": 2033,
                "pid": 203,
                "name": "发货单管理",
                "path": "/warehousing/invoiceIndex",
                "url": "/warehousing/invoiceIndex"
            },
            {
                "id": 2034,
                "pid": 203,
                "name": "装车单管理",
                "path": "/warehousing/lmsWmsLoadNoteOrder",
                "url": "/warehousing/lmsWmsLoadNoteOrder"
            },
            {
                "id": 2035,
                "pid": 203,
                "name": "出库单管理",
                "path": "/warehousing/owNote",
                "url": "/warehousing/owNote"
            }



        ],
        [{
            "id": 10,
            "pid": 0,
            "name": "系统管理"
        }, {
            "id": 11,
            "pid": 10,
            "name": "用户管理",
            "path": "/user",
            "url": "http://localhost:8031/systemManage.html#/user",
            "privilegeKey": "sysManage_user_user"
        }, {
            "id": 12,
            "pid": 10,
            "name": "组织管理"
        }, {
            "id": 13,
            "pid": 12,
            "name": "组织结构管理",
            "path": "/deptManagement",
            "url": "http://localhost:8031/systemManage.html#/deptManagement",
            "privilegeKey": "sysManage_dept_deptInfo"
        }, {
            "id": 14,
            "pid": 12,
            "name": "组织员工管理",
            "path": "/department",
            "url": "http://localhost:8031/systemManage.html#/department",
            "privilegeKey": "sysManage_dept_deptEmployee"
        }, {
            "id": 15,
            "pid": 12,
            "name": "组织岗位管理",
            "path": "/departmentPost",
            "url": "http://localhost:8031/systemManage.html#/departmentPost",
            "privilegeKey": "sysManage_dept_deptPosition"
        }, {
            "id": 16,
            "pid": 10,
            "name": "员工管理",
            "path": "/employee",
            "url": "http://localhost:8031/systemManage.html#/employee",
            "privilegeKey": "sysManage_employee_employee"
        }, {
            "id": 17,
            "pid": 10,
            "name": "岗位管理",
            "path": "/position",
            "url": "http://localhost:8031/systemManage.html#/position",
            "privilegeKey": "sysManage_position_position"
        }, {
            "id": 18,
            "pid": 10,
            "name": "角色-权限管理",
            "path": "/authority",
            "url": "http://localhost:8031/systemManage.html#/authority",
            "privilegeKey": "sysManage_privilege_role"
        }, {
            "id": 19,
            "pid": 10,
            "name": "日志管理"
        }, {
            "id": 20,
            "pid": 19,
            "name": "登录日志",
            "path": "/loginLog",
            "url": "http://localhost:8031/systemManage.html#/loginLog",
            "privilegeKey": "sysManage_log_loginLog"
        }, {
            "id": 21,
            "pid": 19,
            "name": "操作日志",
            "path": "/operationLog",
            "url": "http://localhost:8031/systemManage.html#/operationLog",
            "privilegeKey": "sysManage_log_actionLog"
        }, {
            "id": 22,
            "pid": 10,
            "name": "参数设置"
        }, {
            "id": 23,
            "pid": 22,
            "name": "数据字典",
            "path": "/setSystemParams/dataDictionary",
            "url": "http://localhost:8031/systemManage.html#/setSystemParams/dataDictionary",
            "privilegeKey": "sysManage_system_system_dictionary"
        }, {
            "id": 24,
            "pid": 22,
            "name": "系统参数",
            "path": "/setSystemParams/sysParam",
            "url": "http://localhost:8031/systemManage.html#/setSystemParams/sysParam",
            "privilegeKey": "sysManage_system_system_sysParams"
        }, {
            "id": 25,
            "pid": 10,
            "name": "密码策略管理",
            "path": "/pswPolicy",
            "url": "http://localhost:8031/systemManage.html#/pswPolicy",
            "privilegeKey": "sysManage_system_system_pwdPolicy"
        }, {
            "id": 26,
            "pid": 10,
            "name": "消息管理"
        }, {
            "id": 27,
            "pid": 26,
            "name": "消息推送日志查询",
            "path": "/messageLog",
            "url": "http://localhost:8031/systemManage.html#/messageLog",
            "privilegeKey": "system-messageManagement-msgTemplate"
        }, {
            "id": 28,
            "pid": 26,
            "name": "消息模板配置",
            "path": "/messageTemplate",
            "url": "http://localhost:8031/systemManage.html#/messageTemplate",
            "privilegeKey": "system-messageManagement-messageLog"
        }
        ]
    ];

  export default {
    mounted: function () {
        window.setTimeout(function () {
            $('.demo-userComp-ztree-ztreeMenuDemo pre code').each(function(i, block) {
                hljs.highlightBlock(block);
            });
        }, 100);
    },
    data: function () {
      return {
          // 生成菜单需要的数据结构
          navData: navData,
          componentName: "<ztree-menu>",
          htmlCode: `
      <ztree-menu @link="openTab" :navData="navData"></ztree-menu>
          `,
          jsCode: `
      export default {
        mounted: function () {
        },
        data: function () {
            return {
                // 生成菜单需要的数据结构
                navData: navData,
            };
        },
        methods: {
            openTab: function (zTreeObj) {
                console.dir(arguments);
            }
        },
    }
          `,
      };
    },
    methods: {
        openTab: function (zTreeObj) {
            console.dir(arguments);
        }
    },
  }

</script>

<style lang="scss" scoped>
    /***
   scoped ： 表示当前写的样式是针对当前页面的，对其他页面没有影响
   lang="scss": 表示我写的样式代码是针对SASS的，不是less等。强调，属性的值是scss
   ***/
    .demo-userComp-ztree-ztreeMenuDemo {
        .api table {
            font-family: Consolas, Menlo, Courier, monospace;
            font-size: 12px;
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
            border: 1px solid #e9e9e9;
            width: 100%;
            margin-bottom: 24px;
        }

        .api table td, .api table th {
            border: 1px solid #e9e9e9;
            padding: 8px 16px;
            text-align: left;
        }

        .api table th {
            background: #f7f7f7;
            white-space: nowrap;
            color: #5c6b77;
            font-weight: 600;
        }
    }
</style>
